<template>
  <div id="BOX">

    <div
      class="BOX_inside"
      id="BOX_inside_left"
    >
      <UserTable />
    </div>

    <div
      class="BOX_inside"
      id="BOX_inside_right"
    >
      <rollingLogoVue class="Administrator_roll" @click="back"/>
      <Administrator />
    </div>

  </div>
</template>

<script setup>
import rollingLogoVue from "../components/icons/rollingLogo.vue";
import Administrator from "../components/Administrator/Administrator.vue";
import UserTable from "../components/Administrator/UserTable.vue";
import { onMounted } from "vue";
import router from "../router";
onMounted(() => {
  document.title = "管理员界面";
});
function back(params) {
  router.back()
}
</script>

<style scoped>
#BOX {
  height: 500px;
  width: 800px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  box-shadow: 1px 1px 10px 5px white;
  animation: change 5s ease infinite;
}
.BOX_inside {
  width: 50%;
  height: 100%;
}
#BOX_inside_left {
  background-color: var(--right-yellow);
}
#BOX_inside_right {
  background-color: var(--left-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.Administrator_roll{
  position: absolute;
  left:10px;
  top: 10px;
  width: 50px;
  height: 50px;
}
@keyframes change {
  0% {
    box-shadow: 1px 1px 10px 5px white;
  }
  25% {
    box-shadow: 1px 1px 10px 5px pink;
  }
  50% {
    box-shadow: 1px 1px 10px 5px skyblue;
  }
  75% {
    box-shadow: 1px 1px 10px 5px green;
  }
  100% {
    box-shadow: 1px 1px 10px 5px white;
  }
}
@media screen and (max-width: 800px) {
  #BOX {
    width: 90vw;
  }
  .BOX_inside {
    width: 100%;
    height: 100%;
  }
  #BOX_inside_left {
    width: 0px;
    height: 0px;
  }
}
</style>